<template>
    <div class="caseContai">
        <h1>路由</h1>
        <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            @node-click="nodeClick"
            @current-change="currentChange"
            @check-change="checkChange"
            :props="defaultProps"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ref } from "vue";
export default defineComponent({
    name: "App",
    setup() {
        const data = [
            {
                id: 1,
                label: 'Level one 1',
                children: [
                    {
                        id: 4,
                        label: 'Level two 1-1',
                        children: [
                            {
                                id: 9,
                                label: 'Level three 1-1-1',
                                children: [
                                    {
                                        id: 22,
                                        label: 'Level three 1-1-1-1',
                                    }
                                ],
                            },
                            {
                                id: 10,
                                label: 'Level three 1-1-2',
                            },
                        ],
                    },
                ],
            }
        ]
        const defaultProps = {
            children: 'children',
            label: 'label',
        }
        const nodeClick = (val)=>{ console.log(val) }
        const currentChange = (val)=>{ console.log(val) }
        const checkChange = (val)=>{ console.log(val) }
        return {
            data,
            defaultProps,
            nodeClick,
            currentChange,
            checkChange
        };
    },
    components: {

    },
})
</script>

<style lang="scss">
.caseContai {
    padding: 20px;
    min-width: 800px;
}
</style>